<template>
  <el-tabs
    v-model="activeName"
    closable
    class="demo-tabs"
    @tab-click="handleClick"
    @tab-remove="tabRemove"
    @contextmenu.prevent="openContextMenu($event)"
  >
    <el-tab-pane
      v-for="(obj, index) in openTabs"
      :key="index"
      :label="obj.title"
      :name="obj.name"
    ></el-tab-pane>
  </el-tabs>

  <ul
    v-show="contextMenuVisible"
    :style="{ left: left + 'px', top: top + 'px' }"
    class="contextmenu"
  >
    <li @click="closeOpenTabs">
      <el-icon class="menuIcon"> <CloseBold /> </el-icon>关闭所有
    </li>
    <li @click="closeOtherTabs('left')">
      <el-icon class="menuIcon"> <DArrowLeft /> </el-icon>关闭左边
    </li>
    <li @click="closeOtherTabs('right')">
      <el-icon class="menuIcon"> <DArrowRight /> </el-icon>关闭右边
    </li>
    <li @click="closeOtherTabs('other')">
      <el-icon class="menuIcon"> <RemoveFilled /> </el-icon>关闭其他
    </li>
    <li @click="closeContextMenu()">
      <el-icon class="menuIcon"> <CircleClose /> </el-icon>取消操作
    </li>
  </ul>

  <!-- 2.路由占位符 -->
  <RouterView />
</template>

<script>
import { reactive, toRefs, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useMutitabsStore } from '@/stores/mutitabs.js'

export default {
  setup() {
    const state = reactive({
      contextMenuVisible: false,
      left: 100,
      top: 100,
    })
    const router = useRouter()
    const store = useMutitabsStore()
    // 1.当前激活的tab页
    // 3.当前打开的tabs（后面需要改为状态管理中）
    const { activeName, openTabs } = toRefs(store)

    // 2.点击Tab页调用的方法
    const handleClick = (tab, event) => {
      // 2.1 当前激活的tab
      activeName.value = tab.props.name
      // 2.2 路由跳转
      router.push(`/${tab.props.name}`)
    }

    // 4.删除tab
    const tabRemove = (targetName) => {
      // 4.1 openTabs 去掉关闭的这一项
      // 4.2 如果关闭的是当前激活的，则需要选举下一个被激活的
      // 4.3 如果关闭时，只有1个Tab页，则不允许关闭
      // 4.4 路由跳转

      const tabs = openTabs.value
      // 只有1个选项卡，不允许移除
      if (tabs.length === 1) {
        alert('必须保留一个')
        return
      }
      let myActiveName = activeName.value
      if (myActiveName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              myActiveName = nextTab.name
            }
          }
        })
      }
      // 当前激活的选项卡
      activeName.value = myActiveName
      // 所有的选项卡
      openTabs.value = tabs.filter((tab) => tab.name !== targetName)
      // 路由跳转
      router.push({ name: myActiveName })
    }

    //7.关闭左边/右边/其他
    const closeOtherTabs = (name) => {
      // 见正式项目
    }

    // 8.关闭右键弹窗
    const closeContextMenu = () => {
      state.contextMenuVisible = false
    }
    // 9.删除所有
    const closeOpenTabs = () => {
      state.contextMenuVisible = false
      openTabs.value = [{ title: '测试用例', name: 'cases' }]
      activeName.value = 'cases'
      router.push('cases')
    }

    //打开右键菜单方法
    const openContextMenu = (e) => {
      state.left = e.clientX
      state.top = e.clientY + 15
      state.contextMenuVisible = true
    }

    return {
      closeOpenTabs,
      closeOtherTabs,
      closeContextMenu,
      openContextMenu,
      tabRemove,
      handleClick,
      activeName,
      openTabs,
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped></style>
